import React, { Component } from 'react'
import { Tabs, Table } from 'antd';
// import { createFromIconfontCN } from '@ant-design/icons';
// import { iconUrl } from '../../utlis/icons';
import { getPlayListDetail } from '../../api/playlists';
import { withRouter } from 'react-router-dom';
import { getM3pId } from '../../api/videoMp3Id'
import './playListId.less';

// const IconFont = createFromIconfontCN({
//   scriptUrl: iconUrl
// });
const { TabPane } = Tabs;


class index extends Component {

  constructor() {
    super()

    this.state = {
      // table中的数据
      data: [
        // {
        //   key: 1,
        //   IdIndex: '1',
        //   playcolumn: 'John Brown',
        //   musictitle: 'title',
        //   singer: '32',
        //   album: 'New York No. 1 Lake Park',
        //   times: 'nicdeveloper',
        // }
      ],
      creator: null,

    }
  }
  // columnse = () => {
  //   return  columns = [
  //     // id 列
  //     {
  //       title: '',
  //       key: 'IdIndex',
  //       dataIndex: 'IdIndex'
  //     },
  //     // 播放列
  //     {
  //       title: '',
  //       dataIndex: 'playcolumn',
  //       key: 'playcolumn',
  //       render: text => <div className="img-warp" onClick={() => { console.log(this) }}><img src={text.url} className="playcolumn-img" /><span></span> </div>,
  //     },
  //     // 音乐标题
  //     {
  //       title: '音乐标题',
  //       key: 'musictitle',
  //       dataIndex: 'musictitle'
  //     },
  //     // 歌手
  //     {
  //       title: '歌手',
  //       key: 'singer',
  //       dataIndex: 'singer'
  //     },
  //     // 专辑
  //     {
  //       title: '专辑',
  //       key: 'album',
  //       dataIndex: 'album'
  //     },
  //     // 时长
  //     {
  //       title: '时长',
  //       key: 'times',
  //       dataIndex: 'times'
  //     }
  //   ]
  // }



  // 生命周期函数获取数据
  componentDidMount() {
    this.getPlayListDetailFun()
  }

  getPlayListDetailFun = async () => {
    // console.log(this.props.match.params.id)
    let id = this.props.match.params.id;
    const { data } = await getPlayListDetail(id);
    const { playlist } = data;
    const { tracks, creator, coverImgUrl, tags, trackUpdateTime } = playlist
    // console.log(playlist)
    let date = [];
    for (let i = 0; i < tracks.length; i++) {
      date.push({
        key: i,
        IdIndex: i + 1,
        playcolumn: { url: tracks[i].al.picUrl, id: tracks[i].id },
        musictitle: tracks[i].name,
        singer: tracks[i].ar[0].name,
        album: tracks[i].al.name,
        times: tracks[i].publishTime,
      }
      )
    }

    this.setState({
      creator: creator,
      coverImgUrl: coverImgUrl,
      tags: tags,
      trackUpdateTime: trackUpdateTime,
      data: date,
      signature: creator.signature,
      nickname: creator.nickname,
      avatarUrl: creator.avatarUrl,
      name: playlist.name

    })
    // console.log(this.state.datas)
  }

  // 发送ajax  请求获取歌曲地址，并通过子组件向父组件传值将歌曲地址传递给父组件
  callback = async (id) => {
    const { data } = await getM3pId(id)
    let ids = data.data[0].url
    this.props.ClickChanges(ids)
  }



  render() {
    // console.log(this.state.tags)
    return (
      <div className="playlist-box">
        <div className="playlist-top">
          <div className="img_worp">
            <img src={this.state.coverImgUrl} alt="" />
          </div>
          <div className="info_worp">
            <p className="title">{this.state.name}</p>
            <div className="author-warp">
              <img src={this.state.avatarUrl} alt="" />
              <span className="name">{this.state.nickname}</span>
              <span className="time">{this.state.trackUpdateTime} 创建</span>
            </div>

            {/* <div className="tag-warp">
              <span className="title">标签</span>
              <ul>
                {
                  <li>{...this.state.tags.join('/') }</li>
                }
              </ul>
            </div> */}

            <div className="desc-warp">
              <span className="title">简介：</span>
              <span className="desc">{this.state.signature}</span>
            </div>
          </div>
        </div>
        <div className="tab">
          <Tabs defaultActiveKey="1" onChange={this.callback}>
            <TabPane tab="歌曲列表" key="1">
              <Table columns={[
                // id 列
                {
                  title: '',
                  key: 'IdIndex',
                  dataIndex: 'IdIndex'
                },
                // 播放列
                {
                  title: '',
                  dataIndex: 'playcolumn',
                  key: 'playcolumn',
                  render: text => <div className="img-warp" onClick={() => { this.callback(text.id) }}><img src={text.url} className="playcolumn-img" alt=""/><span></span> </div>,
                },
                // 音乐标题
                {
                  title: '音乐标题',
                  key: 'musictitle',
                  dataIndex: 'musictitle'
                },
                // 歌手
                {
                  title: '歌手',
                  key: 'singer',
                  dataIndex: 'singer'
                },
                // 专辑
                {
                  title: '专辑',
                  key: 'album',
                  dataIndex: 'album'
                },
                // 时长
                {
                  title: '时长',
                  key: 'times',
                  dataIndex: 'times'
                }
              ]} dataSource={this.state.data} pagination={false} />
            </TabPane>
            <TabPane tab="评论" key="2">
              Content of Tab Pane 2
            </TabPane>
          </Tabs>
        </div>
      </div>
    )
  }
}

export default withRouter(index)